<template>
	<view>
		<view class="top" :style="{marginTop:height}">

		</view>
		<view class="head">
			<image :src="URL(userinfo.avatar)" class="head__tx" mode="aspectFill"></image>
			<view class="">
				<view class="head__name">
					{{userinfo.nickname||'微信用户'}}
					<view class="head__name__vip" v-if="userinfo.source">
						<image src="/static/my/Vector(2).png" class="head__name__vip__icon" mode=""></image>
						VIP
					</view>
				</view>
				<view class="head__id">
					ID:{{userinfo.id}}
				</view>
			</view>
		</view>
		<view class="tab">
			<view class="tab__item" v-for="(item,index) in tablist" :key="index" @click="navto(item.url+'?title='+item.text+'&type='+item.type)">
				<view class="tab__item__icon">
					<image :src="'/static/my/'+item.icon+'.png'" :style="item.sty" mode=""></image>
				</view>
				<view class="tab__item__text">
					{{item.text}}
				</view>
			</view>
		</view>
		<view class="con">
			<view class="box">
				<view class="box__item" v-for="(item,index) in tab1" :key="index" @click="navto(item.url+'?title='+item.text+'&type='+item.type)">
					<view class="box__item__icon">
						<image :src="'/static/my/'+item.icon+'.png'" :style="item.sty" mode=""></image>
					</view>
					<view class="box__item__label">
						{{item.text}}
					</view>
					<image src="/static/my/Vector(1).png" class="box__item__more" mode=""></image>
				</view>
				
			</view>
		</view>
		<view class="text" style="margin-top: 68rpx;">
			<u-parse :tagStyle="style" :content="txtcontent"></u-parse>
		</view>
		
		
		<!-- <u-parse :c></u-parse> -->
		<tabbar :current="4"></tabbar>
	</view>
</template>

<script>
	import user from '@/api/_user.js'
	import home from '@/api/_home.js'
	export default {
		data() {
			return {
				tablist:[
					{text:'选校热问',icon:'Vector(3)',sty:'width:68.7rpx;height:59.16rpx;',url:'/pages/xschool/hotwen'},
					{text:'我的收藏',icon:'ax',sty:'width:64.72rpx;height:57.25rpx;',url:'/pages/cschool/collect'},
					{text:'浏览记录',icon:'vipc',sty:'width:61.07rpx;height:61.07rpx;',url:'/pages/cschool/record'},
					{text:'联系咨询',icon:'Vector',sty:'width:61.07rpx;height:61.07rpx;',url:'/pages/home/aboutus',type:'Site_ContactQrcode'},
				],
				tab1:[
					{text:'设置中心',icon:'Group_2090',sty:'width:45.8rpx;height:45.8rpx',url:''},
					{text:'帮助中心',icon:'wen',sty:'width:43.72rpx;height:45.8rpx',url:''},
					{text:'关于我们',icon:'gywm',sty:'width:45.8rpx;height:30.54rpx',url:'/pages/home/aboutus',type:'siteAbout'},
				],
				txtcontent:'',
				style:{
					span:'font-size: 23rpx!important;color: #747474!important;line-height: 28rpx;!important',
					p:'font-size: 23rpx!important;color: #747474!important;line-height: 28rpx;!important'
				},
				userinfo:{}
			};
		},
		computed: {
			height() {
				const height = `calc(${uni.$u.addUnit(uni.$u.sys().statusBarHeight, 'px')})`
				return uni.$u.deepMerge(height)
			},
			bheight() {
				const height = uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom, 'px');
				return uni.$u.deepMerge(height)
			},
		},
		onShow() {
			this.getuserinfo()
		},
		methods:{
			async getuserinfo(){
				let res = await user.userinfo()
				if(res.data.code==200){
					this.userinfo=res.data.data
				}
			},
			async gettxt(){
				let res = await home.config({name:'homeWriting'})
				if(res.data.code==200){
					this.txtcontent=res.data.data.homeWriting
				}
			}
		},
		onLoad() {
			this.gettxt()
		}
	}
</script>

<style lang="scss">
	page {
		background: url('https://mp-b54a63ff-3ce2-4df8-8d6e-f855d8976d34.cdn.bspapp.com/img/Rectangle_113.png') 100% no-repeat;
		background-position: top;
		background-color: #f7f6fb;
		width: 750rpx;
	}

	.top {
		padding-top: 80rpx;
	}
	.con{
		padding: 0 24rpx;
		
	}
	.box{
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(172,204,197,0.5);
		border-radius: 57rpx 57rpx 57rpx 57rpx;
		padding: 17rpx 63rpx 17rpx 53rpx;
		&__title{
			font-family: Microsoft YaHei UI, Microsoft YaHei UI;
			font-weight: 400;
			font-size: 27rpx;
			color: #000000;
			line-height: 61rpx;
		}
		&__item{
			margin: 9rpx 0;
			display: flex;
			align-items: center;
			&__icon{
				width: 78rpx;
				display: flex;
				align-items: center;
			}
			&__label{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				color: #24404F;
				line-height: 61rpx;
				flex: 1;
			}
			&__more{
				width: 14rpx;
				height: 24rpx;
			}
		}
	}
	.head{
		display: flex;
		align-items: center;
		padding: 0 83rpx;
		&__tx{
			width: 122rpx;
			height: 122rpx;
			background: #D9D9D9;
			border-radius: 50%;
			margin-right: 24rpx;
		}
		&__name{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 31rpx;
			color: #24404F;
			line-height: 61rpx;
			display: flex;
			align-items: center;
			&__vip{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 101rpx;
				height: 38rpx;
				background: linear-gradient( 90deg, #E8E8E8 0%, #FFC465 100%);
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				font-family: Allerta, Allerta;
				font-weight: 400;
				font-size: 23rpx;
				color: #FFFFFF;
				margin-left: 13rpx;
				&__icon{
					width: 26.72rpx;
					height: 22.38rpx;
					margin-right: 8rpx;
				}
			}
			
		}
		&__id{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 23rpx;
			color: #757575;
			line-height: 40rpx;
		}
	}
	.tab{
		padding: 0 86rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 60rpx;
		margin-bottom: 40rpx;
		&__item{
			display: flex;
			flex-direction: column;
			align-items: center;
			&__icon{
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				&__bg{
					width: 68.7rpx;
					height: 59.16rpx;
				}
			}
			&__text{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				color: #24404F;
				line-height: 61rpx;
			}
		}
	}
	.text{
		height: 42rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 23rpx;
		color: #747474;
		line-height: 40rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
</style>